<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import request9999 from "../../utils/request9999.js";

const modPasswordFormRef = ref()
const modPasswordForm = ref({
  id: sessionStorage.getItem('id'),
  newPassword: '',
  confirmPassword: '',
  phone: '',
  code: ''
})
const modPasswordRules = {
  newPassword: [
    {required: true, message: '请输入新密码', trigger: 'blur'},
    {min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: '请再次输入新密码', trigger: 'blur'},
    {min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
  ]
}
// 重置表单
const clear = () => {
  modPasswordFormRef.value.resetFields()
}
// 修改密码
const modPassword = () => {
  modPasswordFormRef.value.validate((valid) => {
    if (valid) {
      if (modPasswordForm.value.newPassword === modPasswordForm.value.confirmPassword) {
        request9999({
          url: '/loginTable/modPassword',
          method: 'put',
          data: modPasswordForm.value
        }).then((res) => {
          if (res.data.code === 200) {
            ElMessage.success('修改成功')
            clear()
          } else {
            ElMessage.error(res.data.message)
          }
        }).catch((err) => {
          ElMessage.error("请求异常")
        })
      } else {
        ElMessage.error('两次输入的密码不一致')
      }
    }
  })
}
// 获取验证码
const codeBtnWord = ref("获取验证码")
let time = ref(60)
const getCodeBtnDisabled = ref(false)
const getCode = () => {
  if (!modPasswordForm.value.phone) {
    ElMessage.error('请输入手机号')
    return
  }
  request9999({
    url: '/loginTable/getPhoneCode',
    method: 'get',
    params: {
      phone: modPasswordForm.value.phone
    }
  }).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success('验证码已发送')
      time.value--
      getCodeBtnDisabled.value = true
      codeBtnWord.value = time.value + "s后重新获取"
      let timer = setInterval(() => {
        if (time.value > 1) {
          time.value--
          codeBtnWord.value = time.value + "s后重新获取"
        } else {
          clearInterval(timer)
          codeBtnWord.value = "获取验证码"
          getCodeBtnDisabled.value = false
          time.value = 60
        }
      }, 1000)
    }
  }).catch((err) => {
    ElMessage.error("请求异常")
  })
}
</script>

<template>
  <div class="modPasswordAll">
    <el-card>
      <el-form ref="modPasswordFormRef" :model="modPasswordForm"
               :rules="modPasswordRules" label-width="100px">
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="modPasswordForm.newPassword" autocomplete="off"
                    placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="modPasswordForm.confirmPassword" autocomplete="off"
                    placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <!--手机号-->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="modPasswordForm.phone" autocomplete="off"
                    placeholder="请输入手机号"></el-input>
        </el-form-item>
        <!--验证码-->
        <el-form-item label="验证码" prop="code">
          <el-input v-model="modPasswordForm.code" autocomplete="off"
                    placeholder="请输入验证码" style="width: 130px;"></el-input>
          <el-button type="primary" @click="getCode" style="margin-left: 10px;"
          :disabled="getCodeBtnDisabled">{{ codeBtnWord }}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="clear"
                     style="margin-top: 20px">重置
          </el-button>
          <el-button type="success" @click="modPassword"
                     style="margin-top: 20px">修改密码
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.modPasswordAll {
  padding: 40px;
}
</style>
